// NAVIGATIONS
// -----------



// BASE CLASS
// ----------

.nav
  margin-left: 0
  margin-bottom: $baseLineHeight
  list-style: none


// Make links block level
.nav > li > a
  display: block

.nav > li > a:hover
  text-decoration: none
  background-color: $grayLighter


// Nav headers (for dropdowns and lists)
.nav .nav-header
  display: block
  padding: 3px 15px
  font-size: 11px
  font-weight: bold
  line-height: $baseLineHeight
  color: $grayLight
  text-shadow: 0 1px 0 rgba(255,255,255,.5)
  text-transform: uppercase

// Space them out when they follow another list item (link)
.nav li + .nav-header
  margin-top: 9px



// NAV LIST
// --------

.nav-list
  padding-left: 14px
  padding-right: 14px
  margin-bottom: 0

.nav-list > li > a,
.nav-list .nav-header
  margin-left:  -15px
  margin-right: -15px
  text-shadow: 0 1px 0 rgba(255,255,255,.5)

.nav-list > li > a
  padding: 3px 15px

.nav-list .active > a,
.nav-list .active > a:hover
  color: $white
  text-shadow: 0 -1px 0 rgba(0,0,0,.2)
  background-color: $linkColor

.nav-list [class^="icon-"]
  margin-right: 2px




// TABS AND PILLS
// -------------

// Common styles
.nav-tabs,
.nav-pills
  $clearfix()

.nav-tabs > li,
.nav-pills > li
  float: left

.nav-tabs > li > a,
.nav-pills > li > a
  padding-right: 12px
  padding-left: 12px
  margin-right: 2px
  line-height: 14px // keeps the overall height an even number


// TABS
// ----

// Give the tabs something to sit on
.nav-tabs
  border-bottom: 1px solid #ddd


// Make the list-items overlay the bottom border
.nav-tabs > li
  margin-bottom: -1px


// Actual tabs (as links)
.nav-tabs > li > a
  padding-top: 9px
  padding-bottom: 9px
  border: 1px solid transparent
  $border-radius(4px 4px 0 0)
  &:hover
    border-color: $grayLighter $grayLighter #ddd


// Active state, and it's :hover to override normal :hover
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover
  color: $gray
  background-color: $white
  border: 1px solid #ddd
  border-bottom-color: transparent
  cursor: default


// PILLS
// -----

// Links rendered as pills
.nav-pills > li > a
  padding-top: 8px
  padding-bottom: 8px
  margin-top: 2px
  margin-bottom: 2px
  $border-radius(5px)


// Active state
.nav-pills .active > a,
.nav-pills .active > a:hover
  color: $white
  background-color: $linkColor




// STACKED NAV
// -----------

// Stacked tabs and pills
.nav-stacked > li
  float: none

.nav-stacked > li > a
  margin-right: 0 // no need for the gap between nav items


// Tabs
.nav-tabs.nav-stacked
  border-bottom: 0

.nav-tabs.nav-stacked > li > a
  border: 1px solid #ddd
  $border-radius(0)

.nav-tabs.nav-stacked > li:first-child > a
  $border-radius(4px 4px 0 0)

.nav-tabs.nav-stacked > li:last-child > a
  $border-radius(0 0 4px 4px)

.nav-tabs.nav-stacked > li > a:hover
  border-color: #ddd
  z-index: 2


// Pills
.nav-pills.nav-stacked > li > a
  margin-bottom: 3px

.nav-pills.nav-stacked > li:last-child > a
  margin-bottom: 1px // decrease margin to match sizing of stacked tabs




// DROPDOWNS
// ---------

// Position the menu
.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu
  margin-top: 1px
  border-width: 1px

.nav-pills .dropdown-menu
  $border-radius(4px)


// Default dropdown links
// -------------------------
// Make carets use linkColor to start
.nav-tabs .dropdown-toggle .caret,
.nav-pills .dropdown-toggle .caret
  border-top-color: $linkColor
  margin-top: 6px

.nav-tabs .dropdown-toggle:hover .caret,
.nav-pills .dropdown-toggle:hover .caret
  border-top-color: $linkColorHover


// Active dropdown links
// -------------------------
.nav-tabs .active .dropdown-toggle .caret,
.nav-pills .active .dropdown-toggle .caret
  border-top-color: $grayDark


// Active:hover dropdown links
// -------------------------
.nav > .dropdown.active > a:hover
  color: $black
  cursor: pointer


// Open dropdowns
// -------------------------
.nav-tabs .open .dropdown-toggle,
.nav-pills .open .dropdown-toggle,
.nav > .open.active > a:hover
  color: $white
  background-color: $grayLight
  border-color: $grayLight

.nav .open .caret,
.nav .open.active .caret,
.nav .open a:hover .caret
  border-top-color: $white
  $opacity(100)


// Dropdowns in stacked tabs
.tabs-stacked .open > a:hover
  border-color: $grayLight




// TABBABLE
// --------


// COMMON STYLES
// -------------

// Clear any floats
.tabbable
  $clearfix()

.tab-content
  overflow: hidden // prevent content from running below tabs


// Remove border on bottom, left, right
.tabs-below .nav-tabs,
.tabs-right .nav-tabs,
.tabs-left .nav-tabs
  border-bottom: 0


// Show/hide tabbable areas
.tab-content > .tab-pane,
.pill-content > .pill-pane
  display: none

.tab-content > .active,
.pill-content > .active
  display: block



// BOTTOM
// ------

.tabs-below .nav-tabs
  border-top: 1px solid #ddd

.tabs-below .nav-tabs > li
  margin-top: -1px
  margin-bottom: 0

.tabs-below .nav-tabs > li > a
  $border-radius(0 0 4px 4px)
  &:hover
    border-bottom-color: transparent
    border-top-color: #ddd


.tabs-below .nav-tabs .active > a,
.tabs-below .nav-tabs .active > a:hover
  border-color: transparent #ddd #ddd #ddd


// LEFT & RIGHT
// ------------

// Common styles
.tabs-left .nav-tabs > li,
.tabs-right .nav-tabs > li
  float: none

.tabs-left .nav-tabs > li > a,
.tabs-right .nav-tabs > li > a
  min-width: 74px
  margin-right: 0
  margin-bottom: 3px


// Tabs on the left
.tabs-left .nav-tabs
  float: left
  margin-right: 19px
  border-right: 1px solid #ddd

.tabs-left .nav-tabs > li > a
  margin-right: -1px
  $border-radius(4px 0 0 4px)

.tabs-left .nav-tabs > li > a:hover
  border-color: $grayLighter #ddd $grayLighter $grayLighter

.tabs-left .nav-tabs .active > a,
.tabs-left .nav-tabs .active > a:hover
  border-color: #ddd transparent #ddd #ddd
  *border-right-color: $white


// Tabs on the right
.tabs-right .nav-tabs
  float: right
  margin-left: 19px
  border-left: 1px solid #ddd

.tabs-right .nav-tabs > li > a
  margin-left: -1px
  $border-radius(0 4px 4px 0)

.tabs-right .nav-tabs > li > a:hover
  border-color: $grayLighter $grayLighter $grayLighter #ddd

.tabs-right .nav-tabs .active > a,
.tabs-right .nav-tabs .active > a:hover
  border-color: #ddd #ddd #ddd transparent
  *border-left-color: $white


